<template>
<div class="songsheetSeniority-container">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>歌单访问</el-breadcrumb-item>
    <el-breadcrumb-item>访问歌单总排行</el-breadcrumb-item>
  </el-breadcrumb>
  <div class='echarts' ref='container'></div>
</div>    
</template>
    
<script>
import * as echarts from 'echarts';
import testAx from '@/utils/testApiServer.js'
export default {
  name: "SongSheetSeniority",
  methods: {
    async getDailySheet() {
      const {data: res} = await testAx.get('/sheetOrder')
      this.draw(res.x, res.data)
    },
    draw(x, data) {
      const options = {
        title: {
          text: "歌单访问总排行",
          left:'center',
          textStyle:{
            color:'rgb(0,0,0,0.5)',
            fontFamily:'Arial',
            fontSize:'20',
          }
        },
        grid: {
          y2: 200
        },
        tooltip: {
          formatter: '{b}<br/>访问次数：{c}'
        },
        xAxis: {
          data: x,
          splitLine: {
            show: false,
          },
          axisLabel: {
            rotate: -90,
            fontSize: 10,
            align: 'left'
          },
        },
        yAxis: {},
        series: [
          {
            name: "bar",
            type: "bar",
            data: data,
            emphasis: {
              focus: "series",
            },
            itemStyle:{color:'#5BB8EA'},
            animationDelay: function (idx) {
              return idx * 10;
            },
          },
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function (idx) {
          return idx * 5;
        },
      };
      var myCharts = echarts.init(this.$refs.container);
      myCharts.setOption(options);
    }
  },
  mounted() {
    this.getDailySheet()
  },
};
</script>

<style>
.echarts {
  width: 1200px;
  height: 680px;
  margin: 80px auto;
}
</style>